<!-- author:王丹
     describe:用于学生请假详情
     update-time：2022-04-27 15：50；2022-05-02 15：44
 -->
<template>
<div class="backGroud2">
  <!-- 首部步骤条 -->
<div class="headerImg">
    <img src="@/assets/imgl/writ1.png" alt="">
    <img src="@/assets/imgl/teach1.png" alt="">
    <img src="@/assets/imgl/ok.png" alt="">
</div>
<div class="topBox"></div><hr>
 <span>学生填报</span> <span id="span">教师批审</span> <span>请假详情</span>
 <!-- 学生信息表单 -->
<div class="inputBox">
        姓名<input type="text" disabled>
        班级<input type="text" disabled>
        院系<input type="text" disabled>
        学号<input type="text" disabled>
        辅导员<input type="text" disabled>
        专业 <input type="text" disabled>
</div>

<div class="blockWork">
        <el-cascader :options="Jobtype" disabled placeholder="请假原因" />
</div>
<!-- 时间框 -->
<div class="demo-date-picker">
    <div class="block">
      <el-date-picker
      disabled
        v-model="value"
        type="daterange"
        start-placeholder="Start date"
        end-placeholder="End date"
        :default-time="defaultTime"
      />
    </div>
  </div>
  <!-- 按钮和文本框 -->
   <el-input class="text" disabled v-model="textarea" :rows="3" type="textarea" placeholder="Please input"  />
    <div  class="selctBtn" ><el-button type="primary" color="#3E94AD" :icon="Paperclip">下载附件</el-button></div>
    <div class="blockTeacher"><el-cascader disabled :options="options" placeholder="通过" /></div>
     
    <el-input disabled class="text" v-model="textarea" :rows="3" type="textarea" placeholder="Please input"  />
    
    <!-- 详情表格 -->
    <div class="table">
   <el-table :data="tableData" style="width: 370px;">
    <el-table-column prop="name" label="操作人" width="80"/>
    <el-table-column prop="date" label="操作时间" width="120" />
    <el-table-column prop="things" label="操作事项" width="100" />
    <el-table-column prop="explain" label="说明" />
  </el-table></div>
</div>  
</template>

<script>
import { ref } from 'vue'
import {Paperclip} from '@element-plus/icons-vue'
export default {
    name:"StudentDetails",
    setup(){
        const textarea = ref('');
        const value = ref('')
        const defaultTime = ref([
        new Date(2000, 1, 1, 0, 0, 0),
        new Date(2000, 2, 1, 23, 59, 59),
     ]);
      const Jobtype = [
      {
        value: "consistency",
        label: "事假",
      },
      {
        value: "feedback",
        label: "病假",
      },
    ];
     const options = [
      {
        value: "consistency",
        label: "未通过",
      },
      {
        value: "feedback",
        label: "通过",
      },
     ];
     const tableData = [
    {
    name: 'Tom',   
    date: '2016-05-03',
    things: 'Q请假',
    explain: '未通过'
    },
    {
    name: 'Tom',   
    date: '2016-05-03',
    things: 'Q请假',
    explain: '通过'
    },
    {
    name: 'Tom',   
    date: '2016-05-03',
    things: 'Q请假',
    explain: '通过'
    }];
    return{
        textarea,value ,defaultTime,
        Paperclip,Jobtype,options,tableData
    }
    }
}
</script>

<style scoped lang="less">
/* 背景 */
.backGroud2{
  margin-left:50px;
  margin-top: 90px;
  width: 1200px;
  height: 500px;
  background-color:rgb(194, 218, 226);
  border-radius:30px;
}
/* 步骤条 */
.headerImg {
  margin-left: 200px;
  margin-top: 15px;
  display: inline-block;
  img {
    width: 50px;
    height: 50px;

    &:nth-child(2) {
      margin-left: 300px;
      margin-right: 295px;
    }
  }
}
span{
  display: inline-block;
  margin-left: 180px;
  margin-right:100px;
  margin-top:20px;
  font-size:18px;
  margin-bottom: 20px;
}
/* 输入框 */
 .topBox{
   width: 200px;
   height: 10px;
   background-color: #3e94ad;
   border-radius: 20px;
   margin-left: 830px;
 }
.inputBox{
    width: 1000px;
    height: 40px;
    background-color:#d8e7ed;
    border: 3px solid #f6f9fb;
    text-align: center;
    margin-left: 100px;
  input{
    margin: 5px;
    width: 110px;
    height: 30px;
    border: 0;
    background-color:#d8e7ed;
  }
}
/* 时间输入框 */
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block{
  margin-top:-40px;
  margin-left: -150px;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
/* 按钮和文本框 */
.text{
  width: 600px;
  margin-left: 100px;
}
.selctBtn{
  margin-left: 100px;
  margin-top: 10px;
} 
 .blockTeacher{
  position: absolute;   
  margin-left: 350px;
  margin-top: -38px; 
 }
 .blockWork{
  /* position: absolute; */
  margin-left: 100px;
  margin-top: 10px;
   margin-bottom: 10px;
}
.table{
    margin-left:735px;
    margin-top:-230px;

}
</style>